<template>
  <div>
    <el-card shadow="never">
      <header-title title="客流分析对比(按节假日)"></header-title>
    </el-card>
    <el-card shadow="never">
      <div style="margin-left: 100px;">
        选定今年假日： <el-radio-group v-model="thisHoliday" @change="changeThisYearHoliday">
          <el-radio :label="item.code" v-for="item in thisYearHolidayList" :key="item.code">
            <span>{{item.name}}</span>
          </el-radio>
        </el-radio-group>
        <p></p>
        选定往年假日： <el-radio-group v-model="formerHoliday" @change="changeFormerHoliday">
          <el-radio :label="item.code" v-for="item in formerYearHolidayList" :key="item.code">
            <span>{{item.name}}</span>
          </el-radio>
        </el-radio-group>
        <el-radio-group v-model="quAndQianYear" @change="clickQuAndQianYear" style="margin-left: 10px;">
          <el-radio-button label="1">去年</el-radio-button>
          <el-radio-button label="2">前年</el-radio-button>
        </el-radio-group>
        <el-input oninput="value=value.replace(/[^\d]/g,'')" @change="changeInputYear" type="text" placeholder="2019" v-model="inputYear" maxlength="4" show-word-limit size="small" style="width: 60px;margin-left: 15px;"></el-input> 年
        <el-button @click="search" class="button" size="small" round>查询</el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">节假日分析图</p>
      <div style="margin: 0 0 10px 50px;">
        <el-checkbox-group v-model="checkList" @change="changeCheckboxGroup">
          <el-checkbox label="1">去重客流</el-checkbox>
          <el-checkbox label="2">销售额(元)</el-checkbox>
          <el-checkbox label="3">订单数</el-checkbox>
          <el-checkbox label="4">客单价(元)</el-checkbox>
        </el-checkbox-group>
      </div>
      <chart :options="holidayOptions" style="height: 300px;"></chart>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">节假日分析表</p>
      <el-table :data="holidayData" style="width: 100%">
        <el-table-column prop="holidayName" label="节假日名称"></el-table-column>
        <el-table-column prop="reportDate" label="时间段/变化"></el-table-column>
        <el-table-column prop="totalNumber" label="总去重客流"></el-table-column>
        <el-table-column prop="avgTotalNumber" label="日均去重客流"></el-table-column>
        <el-table-column prop="totalSaleAmount" label="总销售额(元)"></el-table-column>
        <el-table-column prop="avgTotalSaleAmount" label="日均销售额(元)"></el-table-column>
        <el-table-column prop="weighingPayNumber" label="总交易数"></el-table-column>
        <el-table-column prop="avgTotalSaleNumber" label="日均交易数"></el-table-column>
        <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import Chart from '@/components/Charts'
import { mapState } from 'vuex'
export default {
  name: 'PNHolidayContrast',
  components: {
     HeaderTitle,
     Chart
  },
  data(){
    return {
      loading: true,
      // 今年
      thisHoliday: -1, // 不存在
      thisYear: new Date().getFullYear(), // 默认今年
      thisYearHolidayList: [], // 今年假日
      // 往年
      formerHoliday: -1, // 不存在
      formerYear: new Date().getFullYear(), // 默认今年
      formerYearHolidayList: [], // 往年假日

      quAndQianYear: '',
      inputYear: '',
      first: {
        from_date: '', //	string	true	开始日期
        to_date: '', //	string	true	结束日期
        code: '', //	int	true	节假日类型	1.元旦 2.春节 3.清明节 4.劳动节 5.端午节 6.中秋节 7.国庆节
      },
      second: {
        from_date: '', //	string	true	开始日期
        to_date: '', //	string	true	结束日期
        code: '', //	int	true	节假日类型	1.元旦 2.春节 3.清明节 4.劳动节 5.端午节 6.中秋节 7.国庆节
      },
      checkList: ['1', '2'], // 选了几项   1. 去重客流 2.销售额 3.订单数 4.客单价

      holidayData: []
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      // 获取今年假日列表
      this.getThisYearHolidayList(this.thisYear)
      // 获取往年节假日列表
      this.getFormerHolidayList(this.formerYear)
      this.getHolidayChartsData(JSON.stringify(this.checkList), 'day', JSON.stringify(this.first), JSON.stringify(this.second))
    }
  },
  mounted(){
    this.$message({
      type: 'warning',
      message: '请选择要对比的节假日！'
    })
    // 获取今年假日列表
    this.getThisYearHolidayList(this.thisYear)
    // 获取往年节假日列表
    this.getFormerHolidayList(this.formerYear)
    // this.getHolidayChartsData(JSON.stringify(this.checkList), 'day', JSON.stringify(this.first), JSON.stringify(this.second))
  },
  computed: {
    // 获取节假日分析图
    ...mapState('peopleNumber',['holidayOptions'])
  },
  methods:{
    // 选择今年节假日
    changeThisYearHoliday(code){
      this.second.code = code + ''
      let obj = {}
      obj = this.thisYearHolidayList.find((item)=>{
        return item.code === code
      })
      this.second.from_date = obj.startDate
      this.second.to_date = obj.endDate
      if(this.second.from_date === this.first.from_date || this.second.to_date === this.first.to_date){
        this.$message({
          type: 'error',
          message: '同一年的相同假日不可做对比！'
        })
      }
    },
    // 获取今年假日列表
    getThisYearHolidayList(thisYear){
      this.$store.dispatch('peopleNumber/fetchThisYearHolidayList', {thisYear}).then(
        data => {
          this.thisYearHolidayList = data
        }
      ).catch(err => {
        this.thisYearHolidayList = []
      })
    },
    // 选择往年节假日
    changeFormerHoliday(code){
      this.first.code = code + ''
      let obj = {}
      obj = this.formerYearHolidayList.find((item)=>{
        return item.code === code
      })
      this.first.from_date = obj.startDate
      this.first.to_date = obj.endDate
      if(this.second.from_date === this.first.from_date || this.second.to_date === this.first.to_date){
        this.$message({
          type: 'error',
          message: '同一年的相同假日不可做对比！'
        })
      }
    },
    // 获取往年节假日列表
    getFormerHolidayList(formerYear){
      this.$store.dispatch('peopleNumber/fetchFormerHolidayList', {formerYear}).then(
        data => {
          this.formerYearHolidayList = data
          for(let d of this.formerYearHolidayList) {
            if (d.code == this.first.code){
              this.first.from_date = d.startDate
              this.first.to_date = d.endDate
            }
          }
        }
      ).catch(err => {
        this.formerYearHolidayList = []
      })
    },
    // 点击去年或者前年
    clickQuAndQianYear(val){
      if(val === '1'){
        this.formerYear = new Date().getFullYear()-1
      }else if(val === '2'){
        this.formerYear = new Date().getFullYear()-2
      }
      this.getFormerHolidayList(this.formerYear)
    },
    // 输入年
    changeInputYear(val){
      this.formerYear = this.inputYear
      this.getFormerHolidayList(this.formerYear)
    },
    // 搜索
    search(){
      console.log(this.second)
      if(this.first.from_date !== "" && this.second.from_date !== ""){
        this.getHolidayChartsData(JSON.stringify(this.checkList), 'day', JSON.stringify(this.first), JSON.stringify(this.second))
      }else{
        this.$message({
          type: 'error',
          message: '请选择要对比的节假日！'
        })
      }
    },
    changeCheckboxGroup(checkList){
      if(checkList.length > 2){
        this.$message({
          type: 'warning',
          message: '最多选择两项对比！'
        })
      }
      this.checkList = checkList.sort()
      this.getHolidayChartsData(JSON.stringify(this.checkList), 'day', JSON.stringify(this.first), JSON.stringify(this.second))
    },
    // 节假日对比图
    getHolidayChartsData(checkList, period, first, second){
      this.$store.dispatch('peopleNumber/fetchHolidayChartsData', {checkList, period, first, second}).then(
        data => {
//          this.loading = false
          for(let i = 0; i < data.table.length; i++) {
            data.table[i].totalSaleAmount = data.table[i].totalSaleAmount / 100
            data.table[i].avgTotalSaleAmount = data.table[i].avgTotalSaleAmount / 100
          }
          this.holidayData = data.table
        }
      ).catch(err => {
//        this.loading = false
        this.holidayData = []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 10px;
}
.el-radio {
  color: #606266;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: 0;
  margin-right: 10px;
}
</style>
